import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,DatePicker} from 'antd';
const Search = Input.Search;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';

const { RangePicker } = DatePicker;

export default class User extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
           page:1,
           total:1,
           list:[],
           search:{},
           searchFlag:true,
        };
    }

    componentWillMount(){
        this.doFetch();
    }
    componentWillReceiveProps(nextProps){
        
    }
    async doFetch(page=1){
      let {search} = this.state;

      let result = await api('/user/list',{...search,page});
      if(result.cd!=0){
        message.error(result.msg);
        return;
      }
      this.setState({
          page,
          total:result.total,
          list:result.data,
          searchFlag:false
      })
    }

    doSearch(){
      this.setState({
        searchFlag:true
      })
      this.doFetch();
    }

    handleMenuClick(record,e){
      this.context.router.push(`/user/account/list?id=${record.id}&curType=${e.key}`)
    }
    

    //分页
    toPage({current:page,pageSize,total}){
      this.doFetch(page);
    }

   
    render() {
        var {list, page,total,search,searchFlag}=this.state;
        let range = [];
        if(search.startTime){
            range.push(moment(search.startTime))
        }
        if(search.endTime){
            range.push(moment(search.endTime))
        }
        return (
            <div >
                <NavBar navs={[{title:'用户管理'}]} />
                <ContentBody className='container'>
                  <div className='search-panel'>
                      <Row gutter={16}>
                        <Col span={12}>
                          <label>用户昵称:</label>
                          <Input 
                            {...this::bind_change('search.nickname')} 
                            placeholder="请输入用户昵称" 
                          />
                        </Col>
                        <Col span={12}>
                          <label>身份证号:</label>
                          <Input 
                            placeholder="请输入身份证号"
                            {...this::bind_change('search.idNumber')}  
                          />
                        </Col>
                        
                      </Row>
                      <div className='height20'></div>
                      <Row gutter={16} >
                        <Col span={12}>
                          <label>手机号码:</label>
                          <Input 
                            placeholder="请输入手机号码" 
                            {...this::bind_change('search.phone')} 
                          />
                        </Col>
                        <Col span={12}>
                          <div>注册时间:</div>
                          <RangePicker
                            style={{width:'100%'}}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['请选择开始时间', '请选择结束时间']}
                            allowClear={true}
                            value={range}
                            onChange={(registerTime) => {
                              let {search} = this.state;
                              search.startTime = registerTime[0].format('YYYY-MM-DD HH:mm:ss');
                              search.endTime = registerTime[1].format('YYYY-MM-DD HH:mm:ss');
                              this.setState({search})
                            }}
                          />
                        </Col>
                      </Row>
                      <div className='marginT20 text-center'>
                         <Button type="primary" onClick={this.doSearch.bind(this)} icon="search">查询</Button>
                         <Button 
                            type="primary" 
                            className='marginL20' 
                            onClick={()=>{
                              this.setState({
                                search:{}
                              })
                            }} 
                          >
                          重置
                          </Button>
                      </div>
                  </div>

                  <div className='marginB10'>
                      <Button 
                        type="primary" 
                        onClick={()=>{
                          location.href='/user/export?search='+encodeURIComponent(JSON.stringify(this.state.search))
                        }}
                      >
                        导出用户信息
                      </Button>
                  </div>  

                  <Table 
                    bordered
                    columns={this.getColumns()} 
                    simple 
                    dataSource={list}
                    pagination={{
                      current:page,
                      total:total,
                      pageSize:10,
                      showQuickJumper : true
                    }}
                    loading={searchFlag}
                    onChange={this.toPage.bind(this)}
                    scroll={{ x: 1000 }}
                    rowKey={record => record.id}
                  />
                </ContentBody>
                  
            </div>
        );
    }

    getColumns(){

      let columns = [
            {
              title: '用户编号',
              dataIndex: 'id',
              key: 'id',
            }, {
              title: '用户昵称',
              dataIndex: 'nickname',
              key: 'nickname',
              
            }, {
              title: '微信号',
              dataIndex: 'wechatId',
              key: 'wechatId'
            },{
              title: '用户手机号',
              dataIndex: 'phone',
              key: 'phone',
            }, {
              title: '身份证号',
              dataIndex: 'idNumber',
              key: 'idNumber'
            },{
              title: '注册时间',
              dataIndex: 'registerTime',
              key: 'registerTime'
            },{
              title: '操作',
              key: 'action',
              fixed: 'right',
              width:100,
              render: (record) =>{
                  return (
                        <span className={'table-operation'}>
                            <span>
                              <a 
                                href='javascript:void 0'
                                onClick={()=>{
                                  this.context.router.push(`/user/account/list?id=${record.id}`)
                                }}
                              >
                              查看
                              </a>
                              <span className="ant-divider" />
                            </span>
                            
                            <Dropdown overlay={
                              <Menu onClick={this.handleMenuClick.bind(this,record)}>
                                <Menu.Item key={"account"}>账户信息</Menu.Item>
                                <Menu.Item key={"invest"}>投资记录</Menu.Item>
                                <Menu.Item key={"raise"}>筹款记录</Menu.Item>
                                <Menu.Item key={"fund"}>资金流水</Menu.Item>
                                <Menu.Item key={"sms"}>发送短信</Menu.Item>
                              </Menu>
                            }>
                              <a href="#">
                                更多<Icon type="down" />
                              </a>
                            </Dropdown>
                        </span>
                      )
              } ,
            }
        ];

        return columns
    }
}
class ModalInfo extends React.Component{
  constructor(props, context){
    super(props, context);
    this.state={
    };
  }

  validateFiled(){
    let {onOk} = this.props;
    let {resetFields} = this.props.form;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values,resetFields);
      }
    });
  }

  render () {
    const { getFieldDecorator} = this.props.form;
    let {visible,onClose,onOk} = this.props;
    return (
      <Modal
        title={'重置密码'}
        visible={visible}
        onOk={this.validateFiled.bind(this)}
        onCancel={onClose}
      >
        <Form>
          <Row>
            <Col span={24}>
              <Form.Item 
                label="重置密码"
              >
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入新密码',
                  },
                ],
                initialValue:"123456"
              })(<Input size="large" disabled  placeholder="请输入新密码" />)}
            </Form.Item>
            </Col>
          </Row>
        </Form>   
      </Modal>
    )
  }
}
var ModalInfoForm = Form.create()(ModalInfo);
User.contextTypes= { router: React.PropTypes.object.isRequired};

